/* eslint-disable */
<template>
  <div class="background" style="height: auto">
    <!--    <script src="../common/qrious.js"> </script>-->
    <div class="title">
      <Icon type="ios-cart-outline"/>
      购物车
    </div>

    <div style="margin: 90px auto auto; width: 90%;">
      <Table
        show-summary
        :columns="tableColumns"
        :data="list"
        style="background: transparent; margin-top: 20px"
        ref="table"
        @on-selection-change="hasSelected">
      </Table>
      <div style="background-color: white; height: 70px; line-height: 70px; display: flex;
      justify-content: space-around; align-items: center; font-size: 18px;">
        <Button @click="handleSelectAll(true)">全选</Button>
        <Button @click="handleSelectAll(false)">删除选中的商品</Button>
        <span>
          已选择
          <span class="color0">{{ count }}</span>
          首作品
        </span>
        <span>
          总计：<span class="color0">￥{{ total }}</span>
        </span>
        <Button class="items-background-color" style="width: 150px; height: 45px; font-size: 18px;" @click="clear">结算
        </Button>
      </div>
    </div>

    <Modal
      fullscreen
      v-model="modal"
      :footer-hide="true">
      <div class="background" style="font-size: 16px; min-height: 600px; margin: -15px; margin-top: -200px;">
        <div style="width: 90%; margin: 200px auto 50px; padding-top: 100px;">
          <div :style="'min-height: '+ this.height + 'px;'">
            <div style="height: 40px; line-height: 40px; font-size: 20px;">
              <Icon type="ios-cart-outline" color="orange"/>
              <span class="color0">&ensp;购物车&ensp;</span>
              <span style="font-size: 18px">&ensp;/&ensp;结算</span>
            </div>

            <div style="margin: 100px 0 0; font-size: 18px;">订单详情</div>

            <div style="">
              <div>
                <div style="width: 100%; height: 1px" class="items-background-color"></div>
                <Row style="height: 60px; line-height: 60px; font-size: 18px">
                  <Col span="4"><strong>作品信息</strong></Col>
                  <Col span="2"><strong>类型</strong></Col>
                  <Col span="3"><strong>授权种类</strong></Col>
                  <Col span="2"><strong>授权地域</strong></Col>
                  <Col span="3"><strong>起始时间</strong></Col>
                  <Col span="3"><strong>结束时间</strong></Col>
                  <Col span="3"><strong>版权方</strong></Col>
                  <Col span="4"><strong>小计</strong></Col>
                </Row>
                <div style="width: 100%; height: 1px" class="items-background-color"></div>
              </div>

              <!--        每个物品信息-->
              <div v-if="orderResult.orderCartList !== undefined && orderResult.orderCartList.length > 0">
                <div v-for="i in orderResult.orderCartList" v-bind:key="i.permissionId"
                     style="font-size: 16px; margin-top: 10px">
                  <Row>
                    <Col span="4">
                      <span>{{ i.musicName }}</span><br>
                      <span>词作者：{{ i.lyricist }}</span><br>
                      <span>曲作者：{{ i.composer }}</span><br>
                      <span>演唱者：{{ i.singer }}</span>
                    </Col>
                    <Col span="2">
                      {{ i.type }}
                    </Col>
                    <Col span="3">
                      {{ i.allowType }}
                    </Col>
                    <Col span="2">
                      {{ i.allowRegion }}
                    </Col>
                    <Col span="3">
                      {{ i.authorizationStartTime }}
                    </Col>
                    <Col span="3">
                      {{ i.authorizationEndTime }}
                    </Col>
                    <Col span="3">
                      {{ i.userNumber ? i.userNumber : '' }}
                    </Col>
                    <Col span="4">
                      <span class="color0">￥ &ensp;{{ i.totalPrices }}</span>
                    </Col>
                  </Row>
                  <div style="width: 100%; height: 1px; margin-top: 10px; background-color: grey"></div>
                </div>
                <Row>
                  <Col span="17">总计</Col>
                  <Col span="3">
                    <span>订单总额：</span><br>
                    <span>优惠金额：</span>
                  </Col>
                  <Col span="4">
                    <span class="color0">￥ &ensp;{{ orderResult.orderAmount }}</span><br>
                    <span class="color0">￥ &ensp;{{ orderResult.discountAmount }}</span>
                  </Col>
                </Row>
              </div>
            </div>
          </div>

          <div style="position: fixed; bottom: 0; height: 60px; line-height: 60px; display: flex;
                        justify-content: space-between; font-size: 18px;">
            <div style="margin: auto 20px; height: 18px; line-height: 18px; margin-top: 15px;">
              <Radio v-model="read" @click="!read"></Radio>
              已阅读并同意《平台音乐购买须知》，购买后可以提供专业授权证书
            </div>
            <div style="margin: auto 20px; height: 18px; line-height: 18px; margin-top: 15px;">
                <span class="items-background-color">
                  {{ orderResult.orderCartList ? orderResult.orderCartList.length : 0 }}</span>&ensp;首作品
            </div>
            <div style="margin: auto 20px; height: 18px; line-height: 18px; margin-top: 15px;">应付金额：<span
              class="items-background-color">￥ &ensp;{{
                orderResult.paymentAmount ? orderResult.paymentAmount : 0
              }}</span>
            </div>
            <Button class="items-background-color" style="font-size: 20px; margin-left: 250px"
                    @click="submitOrder">
              提交订单
            </Button>
          </div>
        </div>
      </div>
    </Modal>

    <Modal
      fullscreen
      v-model="paymentPage"
      :footer-hide="true">
      <div style="font-size: 16px; min-height: 600px; margin: -15px;">
        <div style="width: 90%; margin: 50px auto;">
          <div style="height: 40px; line-height: 40px; font-size: 20px;">
            <Icon type="ios-cart-outline" color="orange"/>
            <span class="color0">&ensp;购物车&ensp;</span>
            <span style="font-size: 18px">&ensp;/&ensp;结算&ensp;/&ensp;支付</span>
          </div>
          <div style="color: rgba(16, 16, 16, 100); font-size: 28px; text-align: center; margin-top: 100px;
                  height: 35px; line-height: 35px; display: flex; justify-content: center">
            <Icon type="md-checkmark-circle-outline" color="green" size="35" style=""/>
            <div style="margin-left: 10px">订单提交成功，请尽快付款！</div>
          </div>
          <div style="height: 2px;width: 80%; margin: 10px auto;" class="items-background-color"></div>
          <div style="margin: auto; width: 250px">
            <img id="qrcode" alt="" src="../assets/img/qrcode.jpg">
          </div>

        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
// import { QRcode } from '@/common/qrcode'

export default {
  name: 'Cart',
  data () {
    return {
      tableColumns: [
        {
          type: 'selection',
          width: 80,
          align: 'center'
        },
        {
          // type: 'selection',
          title: '作品信息',
          key: 'musicName',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '类型',
          key: 'type',
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '授权种类',
          key: 'allowType',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '地域',
          key: 'allowRegion',
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '起始时间',
          key: 'authorizationStartTime',
          sortable: true,
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '结束时间',
          key: 'authorizationEndTime',
          sortable: true,
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '单价',
          key: 'pricePerDay',
          sortable: true,
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h('Tooltip', { props: { content: '元/天/每项福利' } }, params.row.pricePerDay)
          }
        },
        {
          title: '小计',
          key: 'totalPrices',
          sortable: true,
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '操作',
          key: 'operation',
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h('span', {
              style: {
                color: 'grey'
              },
              on: {
                click: () => {
                  this.deleteItem(params.index)
                }
              }
            }, '删除')
          }
        }
      ],
      list: [],
      status: [],
      count: 0,
      total: 0,
      orderResult: {},
      modal: false,
      read: false,
      code_url: '',
      paymentPage: false
    }
  },
  created () {
    this.height = document.body.clientHeight - 205
    this.$nextTick(() => {
      this.$get('/orderCart/list').then(res => {
        if (res.code === 20000) {
          res.data.list.forEach((item) => {
            if (item.allowRegion !== null) {
              if (item.allowRegion === 0) {
                item.allowRegion = '国内'
              } else if (item.allowRegion === 1) {
                item.allowRegion = '国外'
              } else {
                item.allowRegion = '全球'
              }
            }
            // if (item.allowType !== null) {
            //   item.allowType = item.allowType
            // }
            if (item.type !== null) {
              if (item.type === 0) {
                item.type = '许可'
              }
            }
            if (item.authorizationEndTime.length > 10) {
              item.authorizationEndTime = item.authorizationEndTime.slice(0, 10)
            }
            if (item.authorizationStartTime.length > 10) {
              item.authorizationStartTime = item.authorizationStartTime.slice(0, 10)
            }
            this.list.push(item)
          })
          this.status = res.data.status
          console.log('get list successfully')
        } else {
          this.$Notice.error({
            title: '获取购物车信息失败',
            desc: res.message
          })
        }
      })
    })
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.table.selectAll(status)
    },
    hasSelected (selection) {
      console.log(selection)
      this.count = selection.length
      let tmp = 0
      selection.forEach((item) => {
        if (item.totalPrices !== null && item.totalPrices !== '') {
          tmp += parseFloat(item.totalPrices)
        }
      })
      this.total = tmp
    },
    deleteItem (index) {
      console.log(index)
      const permissionId = this.list[index].permissionId
      this.$get('/orderCart/deleteOneCart/' + permissionId).then(res => {
        if (res.code === 20000) {
          this.list.splice(index, 1)
          // 更新数据
          this.hasSelected(this.$refs.table.getSelection())
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: res.message
          })
        }
      })
    },
    clear () {
      let permissionIdList = ''
      const selection = this.$refs.table.getSelection()
      for (let i = 0; i < selection.length; i++) {
        if (i !== selection.length - 1) {
          permissionIdList += selection[i].permissionId.toString() + '-'
        } else {
          permissionIdList += selection[i].permissionId.toString()
        }
      }
      console.log(permissionIdList)
      if (permissionIdList.length === 0) {
        this.$Notice.error({
          title: '没有可结算的作品'
        })
        return false
      }
      this.$post('/orders/createPermissionOrder', {
        permissionIdList: permissionIdList
      }).then(res => {
        if (res.code === 20000) {
          this.modal = true
          const data = res.data
          const tmp = []
          data.orderCartList.forEach((item) => {
            if (item.type === 0) {
              item.type = '许可'
            } else {
              item.type = '转让'
            }
            if (item.allowRegion !== null) {
              if (item.allowRegion === 0) {
                item.allowRegion = '国内'
              } else if (item.allowRegion === 1) {
                item.allowRegion = '海外'
              } else {
                item.allowRegion = '全球'
              }
            }
            if (item.authorizationStartTime !== null && item.authorizationStartTime.length > 10) {
              item.authorizationStartTime = item.authorizationStartTime.slice(0, 10)
            }
            if (item.authorizationEndTime !== null && item.authorizationEndTime.length > 10) {
              item.authorizationEndTime = item.authorizationEndTime.slice(0, 10)
            }
            tmp.push(item)
          })
          data.orderCartList = tmp
          this.orderResult = data
        } else {
          this.$Notice.error({
            title: '结算失败',
            desc: res.message
          })
        }
      })
    },
    submitOrder () {
      if (this.read === false) {
        this.$Notice.error({
          title: '提交订单失败',
          desc: '请先阅读并同意《平台音乐购买须知》'
        })
        return false
      } else {
        this.$post('/orders/submitOrder', {
          orderId: this.orderResult.orderId
        }).then(res => {
          if (res.code === 20000) {
            this.code_url = res.data.code_url
            this.paymentPage = true
            // const qr = new QRcode({
            //   element: document.getElementById('qrcode'), // 指定的是图片所在的DOM对象
            //   size: 250, // 指定图片的像素大小
            //   level: 'H', // 指定二维码的容错级别(H:可以恢复30%的数据)
            //   value: res.data.code_url // 指定二维码图片代表的真正的值
            // })
          } else {
            this.$Notice.error({
              title: '提交订单失败',
              desc: res.message
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
